<template>
	<div>
		<el-col class="personal-info">
			<el-card class="select-con">
				<el-row>
					<el-col :xs="24" :sm="6" class="mr20 mb20">
						<el-select v-model="selectGame" placeholder="选择游戏">
							<el-option v-for="item in gameList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-col>
					<el-col :xs="24" :sm="6" class="mr20 mb20">
						<el-select v-model="selectType" placeholder="选择类型">
							<el-option v-for="item in typeList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-col>
					<el-col :xs="24" :sm="6" class="mr20 mb20">
						<div class="ac-btns">
							<el-button @click="clearSelect()">清空</el-button>
							<el-button type="primary" @click="getMaterial()">确认</el-button>
						</div>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="hover">
				<template #header>
					<span>数字物料</span>
					<!-- <a @click="router.push({path:'/activity/all'})" class="personal-info-more">更多</a> -->
				</template>
				<div class="personal-info-box">
					<ul class="personal-info-ul" v-if="materialList.length > 0">
						<li v-for="(v, k) in materialList" :key="k" class="personal-info-li">
							<a class="personal-info-li-title" @click="toMaterialDetail(v)">{{ v.title }}</a>
						</li>
					</ul>
					<div v-else>暂无数据</div>
				</div>

				<el-row class="pagination-block" justify="center">
					<el-pagination :hide-on-single-page="isSinglePage" v-model:current-page="newsCurrentPage"
						v-model:page-size="newsPageSize" :small="small" :disabled="disabled" :background="background"
						layout="prev, pager, next, jumper" :total="newsTotalPage" @size-change="handleSizeChange"
						@current-change="handleSizeChange" />
				</el-row>
			</el-card>
		</el-col>

	<div class="my-detail" v-if="showChild">

		<div class="my-detail-con">
			<div class="my-detail-close" @click="showChild = false">
				<ele-Close />
			</div>
			<materialDetail :data="childData" v-if="showChild"></materialDetail>
		</div>

	</div>
</div>
</template>

<script setup lang="ts" name="personal">
import { ref } from 'vue';
import { useIndexApi } from '/@/api/index';
import { useActivityApi } from '/@/api/activity';
import materialDetail from '/@/components/atmMaterialDetail/index.vue'
const newsCurrentPage = ref(1)
const newsPageSize = ref(5)
const small = ref(false)
const background = ref(false)
const newsTotalPage = ref(1);
// const isSinglePage = computed(() => {
// 	return newsTotalPage.value<=1
// })
const isSinglePage = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
	newsCurrentPage.value = val;
	// console.log(`${val} items per page`)
	getMaterial()
}



const selectGame = ref('')
const selectType = ref('')
const gameList = ref([])
async function getGameList() {
	const res = await useActivityApi().getGameList({});
	if (res) {
		gameList.value = res.data
	}
}
getGameList();
const typeList = ref([
	{ value: '1', label: '海报' },
	{ value: '2', label: '视频' },
	{ value: '3', label: '易拉宝' },
	{ value: '4', label: '图片' },
])
const materialList = ref([])
async function getMaterial() {
	const res = await useIndexApi().getMaterial({
		"pageSize": newsPageSize.value,
		"pageNo": newsCurrentPage.value,
		"gameId": selectGame.value,
		"type": selectType.value,
	});
	newsTotalPage.value = res.data.total
	materialList.value = [...res.data.list];
}
getMaterial()
function clearSelect() {
	selectGame.value = '';
	selectType.value = '';
	newsCurrentPage.value = 1;
	getMaterial();
}
const childData = ref({});
const showChild = ref(false)
function toMaterialDetail(data) {
	childData.value = data;
	showChild.value = true;
}
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.personal-info {
	margin: 20px;

	.personal-info-more {
		float: right;
		color: var(--el-text-color-secondary);
		font-size: 13px;

		&:hover {
			color: var(--el-color-primary);
			cursor: pointer;
		}
	}

	.personal-info-box {
		height: 130px;
		overflow: hidden;

		.personal-info-ul {
			list-style: none;

			.personal-info-li {
				font-size: 13px;
				padding-bottom: 10px;

				.personal-info-li-title {
					display: inline-block;
					@include text-ellipsis(1);
					color: var(--el-text-color-secondary);
					text-decoration: none;
				}

				& a:hover {
					color: var(--el-color-primary);
					cursor: pointer;
				}
			}
		}
	}
}

.my-detail {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6);

	.my-detail-close {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 5px;
		top: 5px;
		cursor: pointer;
		z-index: 2;
	}

	.my-detail-con {
		width: 95%;
		max-width: 800px;
		height: 600px;
		height: 90%;
		max-height: 600px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: 2;
	}
}
</style>
